<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      :modal-append-to-body="false"
    >
      <el-row>
        <el-col :span="24"><div class="group-title">专户信息</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"
          ><div class="grid-content">
            项目名称：{{ planDetail.projectName }}
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6"
          ><div class="grid-content">
            专户银行：{{ planDetail.bankName }}
          </div></el-col
        >
        <el-col :span="18"
          ><div class="grid-content">
            专户账号：{{ planDetail.account }}
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="24"
          ><div class="group-title">
            专户资金拨付计划
            <el-button
              v-show="!isJC && isShowSave"
              type="primary"
              @click="onSave"
              class="commonBtn saveBtn fr"
              :loading="isSaveLoading"
              >保存</el-button
            >
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="8"
          ><div class="grid-content">
            拨付周期：
            <span v-if="isJC">{{ planDetail.typeDesc }}</span>
            <el-select
              v-else
              @change="handleChange"
              filterable
              placeholder="请选择"
              style="width: 130px"
              v-model="allocated"
            >
              <el-option
                v-for="item in bursetype"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content">
            拨付比例：{{ planDetail.scale }} %<span
              style="font-size: 12px; color: #bbb9bb"
              >(*工程造价)</span
            >
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content">
            应拨付总额：{{ planDetail.shouldDisburseTotalStr }}元
          </div></el-col
        >
      </el-row>
      <!-- 列表 -->
      <el-table
        v-if="isJC"
        :data="tableList"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        v-loading="loading"
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column align="center" label="拨付周期">
          <template slot-scope="scope">
            {{ scope.row.startDate }} - {{ scope.row.endDate }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="shouldDisburseTotal"
          label="本期应拨付(元)"
        />
        <el-table-column
          align="center"
          prop="realDisburseTotal"
          label="本期实拨付(元)"
        />
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isEmpty">
          <emptyTable emptyText="暂无相关信息" />
        </div>
      </el-table>
      <el-table
        v-else
        :data="tableList"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        v-loading="loading"
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column align="center" label="拨付周期">
          <template slot-scope="scope">
            {{ scope.row.startDate }} - {{ scope.row.endDate }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="shouldDisburseTotal"
          label="本期应拨付(元)"
        />
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isEmpty">
          <emptyTable emptyText="暂无相关信息" />
        </div>
      </el-table>
      <!-- filterField为搜索条件 -->
      <Pagination
        ref="paginationDetail"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
        :pageSize="5"
        :pageSizes="[5]"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'allocatedPlanDetail',
  components: {},
  data() {
    return {
      requestUrl: 'api-acc/cs/disburesplan/expand/findbypage',
      filterField: {
        accountId: '',
      },
      isJC: false,
      tableList: [],
      loading: false,
      isEmpty: false,
      dialogVisible: false,
      dialogTitle: '',
      isSaveLoading: false,
      allocated: '',
      allocatedVal: '',
      bursetype: [],
      planDetail: {},
      accountId: '',
      isShowSave: '',
    }
  },
  created() {
    this.isShowSave =
      this.$store.state.buttonLimitsArr.indexOf('accountList:update') > -1
  },
  methods: {
    refreshData() {
      this.$emit('refresh-data')
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    searchTable() {
      this.loading = true
      this.$nextTick(function () {
        this.$refs.paginationDetail.getTableListData()
      })
    },
    showPlanDetail(accountId) {
      this.isJC =
        localStorage.getItem('loginType') === 'QY' ||
        localStorage.getItem('loginType') === 'XM'
          ? false
          : true
      this.accountId = accountId
      this.filterField.accountId = accountId
      this.getBursetype()
      this.getPlanDetail(this.accountId)
      this.dialogTitle = '查看专户拨付计划'
      this.dialogVisible = true
      this.$nextTick(function () {
        this.$refs.paginationDetail.getTableListData()
      })
    },
    getBursetype() {
      this.axios({
        method: 'post',
        url: 'api-acc/cs/accassconfig/expand/finddisbursetype',
      })
        .then((res) => {
          this.bursetype = res.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取拨付方式数据失败',
            type: 'error',
          })
        })
    },
    getPlanDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/detail',
        data: {
          id: id,
        },
      })
        .then((res) => {
          this.planDetail = res.data.result
          this.allocated = res.data.result.typeDesc
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取专户拨付计划数据失败',
            type: 'error',
          })
        })
    },
    handleChange(val) {
      var obj = {}
      obj = this.bursetype.find(function (item) {
        return item.code === val
      })
      this.allocatedVal = obj.code
    },
    onSave() {
      this.axios({
        method: 'post',
        url: 'api-acc/cs/disburesplan/expand/saveplan',
        data: {
          accountId: this.accountId,
          scale: this.planDetail.scale,
          type: this.allocated,
        },
      })
        .then((res) => {
          this.refreshData()
          this.$refs.paginationDetail.getTableListData()
          this.$message({
            message: '保存成功',
            type: 'success',
          })
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '保存失败',
            type: 'error',
          })
        })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .el-form {
    margin-top: 20px;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .searchInputWidth /deep/ .el-form-item__label {
    width: 82px;
  }
}

.form-item {
  width: 300px;
}
.group-title {
  background-color: #f2f2f2;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  padding-left: 10px;
}
.grid-content {
  height: 45px;
  line-height: 45px;
  padding-left: 10px;
}
.saveBtn {
  height: 25px;
  margin-right: 10px;
  margin-top: 10px;
  width: 60px;
}
</style>
